<template>  

    <div class="login-container">  
      <div class="profile-image">  
        <img :src="profileImage" alt="Profile" class="round-image" />  
      </div>  
      <div class="login-form"> 
        <div class="todo-list">
    <div class="todo">
      <a href="https://gitee.com/ancient-city-xiao/key.s" target="_blank">查看我的gitee仓库</a>

    </div>
    


    <TodoForm @add-todo="addTodo" />
    <ul>
      <TodoItem v-for="todo in filteredTodos" :key="todo.id" :todo="todo" @update:todo="updateTodo"
        @remove-todo="removeTodo" />
    </ul>
  </div>
        <h2>登录系统</h2>  
         账号22002334  密码123456
        <input type="text" v-model="username" placeholder="账号" required />  
        <input type="password" v-model="password" placeholder="密码" required />  
        <button @click="login">登录</button>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'Login',  
    data() {  
      return {  
        profileImage: 'https://www.codelover.club/files/stutasks/userID_894/currNo_43/FtVXA9d7yV29O5KIIrL_Dj0BZxHE.jpg', // 替换为你的图片路径  
        username: '',  
        password: '',  
      };  
    },  
    methods: {  
      login() {  
        if (this.username === '22002334' && this.password === '123456') {  
          alert('登录成功！');  
          // 这里可以添加登录成功后的逻辑，比如跳转到另一个页面  
        } else {  
          alert('账号或密码错误！');  
          this.username = '';  
          this.password = '';  
        }  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .todo-list {
  max-width: 600px;
  margin: 0 auto;
  background-color: #f3a59c;
 
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(211, 121, 121, 0.1);
}
  .login-container {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    height: 100vh;  
    text-align: center;  
    background-color: #ebc1c1
  }  
    
  .profile-image {  
    margin-bottom: 20px;  
  }  
    
  .round-image {  
    border-radius: 50%;  
    width: 150px;  
    height: 150px;  
    object-fit: cover;  
  }  
    
  .login-form {  
    width: 100%;  
    max-width: 300px;  
  }  
    
  .login-form input {  
    margin-bottom: 10px;  
    padding: 10px;  
    width: 100%;  
  }  
    
  .login-form button {  
    padding: 10px 20px;  
    background-color: #4CAF50; /* Green */  
    border: none;  
    color: white;  
    text-align: center;  
    text-decoration: none;  
    display: inline-block;  
    font-size: 16px;  
    margin: 4px 2px;  
    cursor: pointer;  
  }  
  </style>